<template>
  <view>
    <view class="top-warp" id='top-warp'>
      <u-navbar :title="title" @leftClick="leftClick" bgColor="#ffffff" :titleStyle="titleStyle" :leftIconColor="leftIconColor" placeholder="true" />
      <!-- 营业额 -->
      <view class="card">
          <view class="title">总额</view>
          <view class="total-amount">
            <view>
              <text style="color: white;">￥</text>
              <text class="price" v-if="branchIdEnum.ONLINE_REVENUE == params.typeId">
                {{ dayStatsStore.scanCodePayTotalTurnover }}
              </text>
              <text class="price" v-else-if="branchIdEnum.CASH_INCOME == params.typeId">
                {{ dayStatsStore.cashMoney }}
              </text>
              <text class="price" v-else-if="branchIdEnum.DOU_YIN == params.typeId">
                {{ dayStatsStore.turnoverDouYin }}
              </text>
              <text class="price" v-else-if="branchIdEnum.MEI_TUAN == params.typeId">
                {{ dayStatsStore.turnoverMeiTuan }}
              </text>
              <text class="price" v-else-if="branchIdEnum.ACTIVITY_REVENUE == params.typeId">
                {{ dayStatsStore.activityTurnover }}
              </text>
            </view>
          </view>
        </view>
      <view class="business-hours">
        营业时间：{{params.startDateStr}} 至 {{ params.endDateStr }}
      </view>
      <view class="business-hotspot">
          <u-tabs :list="typeList" lineHeight="3" lineWidth="40" :activeStyle="{color: '#6072FF'}" lineColor="#6072FF"
                  @click="clickCurrent()" :current="params.typeId">
          </u-tabs>
        </view>
    </view>
    <scroll-view scroll-y :style="[{height: height + 'px'}]" lower-threshold="200" @scrolltolower="reachBottom">
      <view v-if="statsList.length > 0">
        <view class="card-list" v-for="(item, index) in statsList" :key="index" @click="navRecord(item)">
          <view class="explain">
            <view class="title">{{ item.body }}</view>
            <view class="yuan">{{ item.totalAmount }}元</view>
          </view>
          <view class="time u-flex u-row-between" v-if="item.outTradeNo">
            <view>平台订单号：</view>{{item.outTradeNo}}
          </view>
          <view class="time u-flex u-row-between" v-if="item.payChannelOrderNo">
            <view v-if="params.typeId == branchIdEnum.MEI_TUAN">
              美团订单编号：
            </view>
            <view v-else-if="params.typeId == branchIdEnum.DOU_YIN">
              抖音订单编号：
            </view>
            <view v-else>
              交易单号：
            </view>
            {{item.payChannelOrderNo}}
          </view>
          <view class="time u-flex-row u-row-between">
            <view style="width: 85%">{{Date.parse(item.gmtPayment) | date('yyyy/mm/dd hh:MM:ss')}}</view>
            <view class="device-info">
              <text v-if="item.deviceAlias">{{item.deviceAlias}}号_</text>
              <text v-if="item.deviceTypeName">{{item.deviceTypeName}}_</text>
              <text v-if="item.deviceNo">{{item.deviceNo}}</text>
              <text v-if="item.remarkName">（{{item.remarkName}}）</text>
            </view>
          </view>
          <view class="nav-record">
            查看订单记录
          </view>
        </view>
      </view>
      <u-empty v-else text="暂无数据" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
      <u-loadmore v-if="statsList.length > 0" :status="loadmoreStatus" :loading-text="loadingText"
                  :loadmore-text="loadmoreText" :nomore-text="nomoreText" height="70rpx" line=true>
      </u-loadmore>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        height:0,
        title: '',
        titleStyle: 'color:rgb(0, 0, 0)',
        leftIconColor: 'rgb(0, 0, 0)',
        params:{
          dayType:0,
          startDateStr:'',
          endDateStr:'',
          mchStoreId:'',
          pageNum: 1,
          pageSize: 10,
          typeId: 0,
          statsType:'',
          totalPage: '',
        },
        loadmoreStatus: 'loadmore',
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '实在没有了',
        typeList: [
            {
          value: 0,
          name: '扫码收入',
          typeId:2,
        },
          {
            value: 1,
            name: '现金收入',
            typeId:1,
          },
          {
            value: 2,
            name: '活动收入',
            typeId:3,
          },
          {
            value: 3,
            name: '抖音核销',
            typeId: 15,
          },
          {
            value: 4,
            name: '美团核销',
            typeId: 14,
          }
        ],

        dayStatsStore:{
          turnoverMeiTuan:0,
          turnoverDouYin:0,
          activityTurnover:0,
          cashMoney:0,
          scanCodePayTotalTurnover:0,
        },
        branchIdEnum:this.$statsBranchIdEnum,
        statsList:[],
      }
    },
    onLoad(options) {
      if(options){
        this.title =  JSON.parse(options.storeName);
        this.params.startDateStr = options.startDateStr
        this.params.endDateStr = options.endDateStr
        this.params.mchStoreId = options.mchStoreId
        this.params.typeId = options.typeId
        this.params.statsType = options.statsType
        this.params.deviceNo = options.deviceNo
        this.initData()
      }
      console.log(options)
    },
    mounted() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#top-warp').boundingClientRect(data => {
        this.height = uni.getSystemInfoSync().windowHeight - data.height;
      }).exec();
      this.height = this.height - 20;
    },
    methods:{

      // 查看订单记录
      navRecord(data) {
        // console.log('跳转数据',JSON.stringify(data))
        let typeId = '';
        const item = this.typeList.find(item => item.value == this.params.typeId);
        if (item) {
          typeId = item.typeId;
        }
        this.$helpers.toast('查看订单记录',typeId);
        let outTradeNo = '';
        if(this.params.typeId == this.branchIdEnum.CASH_INCOME){
          outTradeNo = data.outTradeNo; //现金
        }else{
          outTradeNo = data.payChannelOrderNo; //其他
        }
        uni.navigateTo({
          url: "/pages-other/order/order"
              .concat("?typeId=").concat(typeId)
              .concat("&outTradeNo=").concat(outTradeNo)
              .concat("&startTime=").concat(data.updateTime)
        })
      },
      initData() {
        this.params.pageNum = 1;
        this.statsList = [];
        this.findStatsStoreBranchHead();
        this.findStatsStoreBranchData();
      },
      reachBottom() {
        if (this.params.pageNum >= this.params.totalPage) {
          return;
        };
        this.params.pageNum++;
        this.loadmoreStatus = 'loading'
        this.findStatsStoreBranchData();
      },
      findStatsStoreBranchHead() {
        this.commonCheck();

        let params = {
          startDateStr: this.params.startDateStr,
          endDateStr: this.params.endDateStr,
          branchId: this.params.typeId,
          mchStoreId: this.params.mchStoreId,
          statsType: this.params.statsType,
          deviceNo: this.params.deviceNo,
        }

        this.$api('statsStore.findStatsStoreBranchHead', params).then(res => {
          if (res.status == 0) {
            this.dayStatsStore = res.data;
          } else {
            getApp().err('加载不成功:' + res.msg);
          }
        }).catch(() => {

        })
      },
      findStatsStoreBranchData(){
        this.commonCheck();

        let params = {
          startDateStr: this.params.startDateStr,
          endDateStr: this.params.endDateStr,
          branchId: this.params.typeId,
          mchStoreId: this.params.mchStoreId,
          statsType: this.params.statsType,
          deviceNo: this.params.deviceNo,
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
        }

        this.$api('statsStore.findStatsStoreBranchData', params).then(res => {
          if (res.status == 0) {
            this.params.pageNum = res.data.pageNum;
            this.params.totalPage = res.data.pages;
            this.loadmoreStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
            if (this.params.totalPage == 0) {
              this.loadmoreStatus = 'nomore';
            }
            this.statsList = [...this.statsList, ...res.data.list]; //合并数组
            // console.log(this.list.length,"cangu")
          } else {
            getApp().err('加载不成功:' + res.msg);
          }
        }).catch(() => {

        })
      },
      commonCheck() {
        if (this.$u.test.isEmpty(this.params.startDateStr)) {
          getApp().err("开始时间飞到外太空啦");
          return
        }
        if (this.$u.test.isEmpty(this.params.endDateStr)) {
          getApp().err("结束时间飞到外太空啦");
          return
        }
        // console.log(this.params.typeId,'分支id')
        if (this.$u.test.isEmpty(this.params.typeId) && this.params.typeId < 0) {
          getApp().err("分支ID飞到外太空啦");
          return
        }
        if (this.$u.test.isEmpty(this.params.mchStoreId)) {
          getApp().err("场地ID飞到外太空啦");
          return
        }
        if(this.$u.test.isEmpty(this.params.deviceNo) && this.params.statsType == 2){
          getApp().err("设备号飞到外太空啦");
          return
        }
      },
      clickCurrent(e){
        this.params.typeId = e.value;
        this.params.pageNum = 1;
        this.statsList = [];
        this.statsList = [];
        // console.log(this.params.statsType)
        this.findStatsStoreBranchHead();
        this.findStatsStoreBranchData();
      },
      // 返回上一页
      leftClick() {
        uni.navigateBack();
      },
    }
  }

</script>

<style lang="scss" scoped>
  .top-warp{
     background: white;
     padding: 25rpx;
    .card {
      background: linear-gradient(to bottom right, rgba(255, 115, 4, 1), rgba(255, 150, 22, 1));
      border-radius: 20rpx;
      padding-bottom: 20rpx;

      .title {
        color: rgba(255, 255, 255, 0.7);
        font-size: 22rpx;
        letter-spacing: 0.5;
        padding: 20rpx 0rpx 0rpx 35rpx;
      }

      .total-amount {
        padding: 20rpx 30rpx;
        display: flex;
        justify-content: space-between;
        .price {
          color: rgb(255, 255, 255);
          font-size: 46rpx;
          padding-left: 10rpx;
        }
      }

    }
    .business-hours {
      font-size: $f-base;
      margin-top: 30rpx;
    }
  }
  .card-list {
    background: rgb(250, 250, 250);
    border-radius: 20rpx;
    padding: 26rpx $u-padding-large;
    margin: 26rpx;
    font-size: $f-base;
    .nav-record{
      color: #6072FF;
      text-align: end;
      margin-top: 30rpx;
    }
    .device-info {
      color: rgb(120, 121, 123);
      font-size: 26rpx;
      letter-spacing: 1rpx;
      margin-top: 10rpx;
      //width: 400rpx;
    }

    .title {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
    }

    .explain {
      display: flex;
      justify-content: space-between;
      font-size: $uni-font-size-base;
      letter-spacing: 0.5rpx;

      .title {
        width: 450rpx;
        color: rgba(0, 0, 0, 0.7);
      }

      .yuan {
        color: rgba(0, 0, 0, 0.9);
      }
    }

    .time {
      color: rgba(0, 0, 0, 0.5);
      margin-top: 30rpx;
    }
  }
</style>
